import { CloseOutlined, class_esy } from 'esy-ui';
import { useState } from 'react';
import { BgImg, Img } from '@/components';
import bgPng from '@/assets/images/common/login-bg.png';
import Login from './Login';
import Register from './Register';
import { useFormatText, useNavigation } from '@/hooks';
import logoPng from '@/assets/images/common/logo.png';
import beforePng from '@/assets/images/common/before.png';
import KindTips from './KindTips';

export const tts = {
  0: 'vip_signin',
  1: 'register_account',
  init: '0',
};

export type TTS = keyof typeof tts;

Object.defineProperty(tts, 'init', {
  value: '0',
  enumerable: false,
});

function LoginRegistry() {
  const navigation = useNavigation();
  const { text } = useFormatText();
  const [type, setType] = useState<TTS>(tts.init as TTS);

  return (
    <BgImg url={bgPng} className='w-full h-auto flex-1 bg-bed bg-contain p-3'>
      <CloseOutlined
        className='text-split inline-block float-right text-lg'
        onClick={() => {
          navigation('/');
        }}
      />
      <Img boxClassName='h-16 mt-14 mx-auto mb-9' src={logoPng} />
      <div className='px-3'>
        <div className='flex items-center justify-between w-full'>
          {Object.keys(tts).map((key) => (
            <div
              key={key}
              onClick={() => {
                type !== key && setType(key as TTS);
              }}
              className={class_esy(['text-base text-center flex-1 cursor-pointer', type === key ? 'text-white' : 'text-split'])}
            >
              {text(tts[key])}
            </div>
          ))}
        </div>
        <div className='relative mt-6 bg-head border border-desc rounded p-6 text-white transition-height duration-300'>
          <Img src={beforePng} boxClassName={class_esy(['absolute w-3.5 -ml-1.5 top-0 -translate-y-full transition-left duration-300', type === tts.init ? 'left-1/4' : 'left-3/4'])} />
          {type === tts.init ? <Login /> : <Register />}
        </div>
        <div
          onClick={() => {
            navigation('/');
          }}
          className='text-center text-primary m-3 underline'
        >
          {text('random_look')}
        </div>
        <KindTips type={type} />
      </div>
    </BgImg>
  );
}

export default LoginRegistry;
